<template>
  <br />
  <div class="zong" v-for="sts in leaves" :key="sts.id">
    <div>
      <img
        src="../../assets/100.jpg"
        alt=""
        width="50px"
        height="50px"
      />&nbsp;&nbsp;{{ sts.username }}
    </div>
    <div class="pingjjj">评价：{{ sts.judge }}</div>
    <div class="liuyanero">
      <div class="liuyn-wrapper">
        <span>留言内容：</span>

        <textarea
          name=""
          id=""
          cols="30"
          rows="10"
          v-model="sts.leave"
        ></textarea>
      </div>
    </div>
    <br />
  </div>
</template>

<script>
import { http } from "../../utils/http.js";
export default {
  data() {
    return {
      leaves: [],
      keyWord: "",
    };
  },
  created() {
    http
      .request("/getLeavesList")
      .then((res) => {
        if (res.data) {
          this.leaves = res.data;
          console.log(res);
        }
      })
      .catch((error) => {
        // 处理请求错误
        console.error(error);
      });
  },
};
</script>

<style scoped>
.zong {
  border: 3px solid #51dde2;
  display: flex;
  flex-direction: column;
  /* 确保左侧边框和子元素有10px距离，通常是通过padding或margin实现 */
  padding-left: 10px;
  margin: 0 auto;
  width: 70%;
  background-color: white; /* 设置整个盒子背景白色 */
  border-radius: 10px; /* 添加圆角 */
}

.zong .pingjjj,
.zong .liuyanero {
  margin-left: 30px;
  margin-top: 5px;
}

.zong .liuyanero textarea {
  border: 3px solid rgb(124, 208, 236);
  border-radius: 5px; /* 添加圆角 */
  width: 600px;
  height: 150px;
}
</style>